<div class="cloumbox">
    <div class="menu-title"><span>组件库</span></div>
    <div class="navbox">
        <div class="navgroup">
            <div class="navtitle">
                媒体组件
            </div>
            <div class="navs-components">
                <nav class="special" data-type="banner">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-image-multiple"></i></p>
                    <p>图片轮播</p>
                </nav>
                <nav class="special" data-type="imageSingle">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-image"></i></p>
                    <p>单图组</p>
                </nav>
                <nav class="special" data-type="window">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-newspaper"></i></p>
                    <p>图片橱窗</p>
                </nav>
                <nav class="special" data-type="video">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-video"></i></p>
                    <p>视频组</p>
                </nav>
                <div class="clear"></div>

            </div>
            <div class="navtitle">
                商城组件
            </div>
            <div class="navs-components">
                <nav class="special" data-type="search">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-search-web"></i></p>
                    <p>搜索框</p>
                </nav>
                <nav class="special" data-type="notice">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-volume-high"></i></p>
                    <p>公告组</p>
                </nav>
                <nav class="special" data-type="navBar">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-apps"></i></p>
                    <p>导航组</p>
                </nav>
                <nav class="special" data-type="goods">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-shopping"></i></p>
                    <p>商品组</p>
                </nav>
                <nav class="special" data-type="coupon">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-ticket-percent"></i></p>
                    <p>优惠券组</p>
                </nav>
                <div class="clear"></div>

            </div>
            <div class="navtitle">
                工具组件
            </div>
            <div class="navs-components">
                <nav class="special" data-type="blank">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-selection"></i></p>
                    <p>辅助空白</p>
                </nav>
                <nav class="special" data-type="guide">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-minus"></i></p>
                    <p>辅助线</p>
                </nav>
                <nav class="special" data-type="richText">
                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-clipboard-text"></i></p>
                    <p>富文本</p>
                </nav>
                <div class="clear"></div>

            </div>



        </div>

        <div class="action">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-normal skysave">保存页面</button>
        </div>
    </div>
</div>


<script id="tpl_diy_page" type="text/template">
    <div id="diy-@{{ d.id }}" class="phone-top optional __no-move" data-itemid="page"
         style="background: @{{ d.style.titleBackgroundColor }} url('/static/admin/images/phone-top-@{{ d.style.titleTextColor }}.png') no-repeat center / contain;">
        <h4 style="color: @{{ d.style.titleTextColor }};">@{{ d.params.title }}</h4>
    </div>
</script>
<!-- diy元素: 搜索栏 -->
<script id="tpl_diy_search" type="text/template">
    <div class="drag optional" id="diy-@{{ d.id }}" data-itemid="@{{ d.id }}">
        <div class="diy-search">
            <input type="text" lay-filter="text" style="text-align: @{{ d.style.textAlign }}; color: @{{ d.style.inputColor }};" placeholder="@{{ d.params.placeholder }}" class="layui-input @{{ d.style.searchStyle }}">
        </div>
        <div class="btn-edit-del">
            <div class="btn-del">删除</div>
        </div>
    </div>
</script>

<!-- diy元素: 辅助空白 -->
<script id="tpl_diy_blank" type="text/template">
    <div class="drag optional" id="diy-@{{ d.id }}" data-itemid="@{{ d.id }}">
        <div class="diy-blank" style="height: @{{ d.style.height }}px; background: @{{ d.style.background }};">
        </div>
        <div class="btn-edit-del">
            <div class="btn-del">删除</div>
        </div>
    </div>
</script>

<!-- diy元素: 辅助线 -->
<script id="tpl_diy_guide" type="text/template">
    <div class="drag optional" id="diy-@{{ d.id }}" data-itemid="@{{ d.id }}">
        <div class="diy-guide" style="padding: @{{ d.style.paddingTop }}px 0; background: @{{ d.style.background }};">
            <p class="line" style="border-top: @{{ d.style.lineHeight }}px @{{ d.style.lineStyle }} @{{ d.style.lineColor }};">
            </p>
        </div>
        <div class="btn-edit-del">
            <div class="btn-del">删除</div>
        </div>
    </div>
</script>

<!-- diy元素: 富文本 -->
<script id="tpl_diy_richText" type="text/template">
    <div class="drag optional" id="diy-@{{ d.id }}" data-itemid="@{{ d.id }}">
        <div class="diy-richText"
             style="background: @{{ d.style.background }}; padding: @{{ d.style.paddingTop }}px @{{ d.style.paddingLeft }}px;">
            @{{ d.params.content }}
        </div>
        <div class="btn-edit-del">
            <div class="btn-del">删除</div>
        </div>
    </div>
</script>

<!-- diy元素: 公告组 -->
<script id="tpl_diy_notice" type="text/template">
    <div class="drag optional" id="diy-@{{ d.id }}" data-itemid="@{{ d.id }}">
        <div class="diy-notice "
             style="background: @{{ d.style.background }}; padding: @{{ d.style.paddingTop }}px 10px;">

            <img src="@{{ d.params.icon }}">
            <span style="color: @{{ d.style.textColor }};">@{{ d.params.text }}</span>
        </div>
        <div class="btn-edit-del">
            <div class="btn-del">删除</div>
        </div>
    </div>
</script>

<!-- diy元素: banner -->
<script id="tpl_diy_banner" type="text/template">
    <div class="drag optional" id="diy-@{{ d.id }}" data-itemid="@{{ d.id }}">
        <div class="diy-carousel">
            @{{#  layui.each(d.data, function(index, item){ }}
            <img src="@{{ item.imgUrl }}">
            @{{#  }); }}
            <div class="dots center @{{ d.style.btnShape }}">
                @{{#  layui.each(d.data, function(index, item){ }}
                <span style="background: @{{ d.style.btnColor }};"></span>
                @{{#  }); }}
            </div>
        </div>
        <div class="btn-edit-del">
            <div class="btn-del">删除</div>
        </div>
    </div>
</script>